﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">
    <style type="text/css">
        .checkbox {
            padding: 0.5em 2em;
        }

        input[type=text], select {
            width: 30em
        }

        label {
            width: 10em
        }

        .checkbox label {
            width: auto
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <form id="myForm">
        <fieldset>
            <legend>日志过滤</legend>
            <div>
                <label for="type">日志类型</label>
                <select id="type" name="filter:type">
                    <option value="">全部</option>
                    <option value="error">异常</option>
                    <option value="log">日志</option>
                </select>
            </div>
            <div>
                <label for="source">日志源</label>
                <select id="source" name="filter:source">
                    <option value="">全部</option>
                    <option value="Auditing">审计</option>
                </select>
            </div>
            <div>
                <label for="source">日志等级</label>
                <select id="level" name="filter:level">
                    <option value="">全部</option>
                    <option value="Falt">致命</option>
                    <option value="Error">异常</option>
                    <option value="Warn">警告</option>
                    <option value="Info">信息</option>
                    <option value="Trace">跟踪</option>
                </select>
            </div>
            <div>
                <label for="source">标签</label><span class="checkbox">
                    <label for="tag-error">异常</label>
                    <input type="checkbox" value="Exception" id="tag-error" name="filter:tag" />
                </span>
                <span class="checkbox">
                    <label for="tag-auditing">审计日志</label>
                    <input type="checkbox" value="Auditing" id="tag-auditing" name="filter:tag" />
                </span>
                <span class="checkbox">
                    <label for="tag-f-error">友好异常</label>
                    <input type="checkbox" value="UserFriendlyException" id="tag-f-error" name="filter:tag" />
                </span>
            </div>
        </fieldset>
        <fieldset>
            <legend>审计内容过滤 </legend>
            <div>
                <label for="auditing-TenantId">租户Id</label>
                <input type="text" id="auditing-TenantId" name="filter:TenantId" />
            </div>
            <div>
                <label for="auditing-UserId">用户Id</label>
                <input type="text" id="auditing-UserId" name="filter:UserId" />
            </div>
            <div>
                <label for="auditing-ImpersonatorUserId">ImpersonatorUserId</label>
                <input type="text" id="auditing-ImpersonatorUserId" name="filter:ImpersonatorUserId" />
            </div>
            <div>
                <label for="auditing-ImpersonatorTenantId">ImpersonatorTenantId</label>
                <input type="text" id="auditing-ImpersonatorTenantId" name="filter:ImpersonatorTenantId" />
            </div>
            <div>
                <label for="auditing-ServiceName">服务名称</label>
                <input type="text" id="auditing-ServiceName" name="filter:ServiceName" />
            </div>
            <div>
                <label for="auditing-MethodName">调用方法</label>
                <input type="text" id="auditing-MethodName" name="filter:MethodName" />
            </div>
            <div>
                <label for="auditing-Parameters">参数</label>
                <input type="text" id="auditing-Parameters" name="filter:Parameters" />
            </div>
            <div>
                <label for="auditing-ReturnValue">返回值</label>
                <input type="text" id="auditing-ReturnValue" name="filter:ReturnValue" />
            </div>
            <div>
                <label for="auditing-ExecutionTime">运行时间</label>
                <input type="text" id="auditing-ExecutionTime" name="filter:date" placeholder="区间:[2021-01-01 TO 2021-01-18]/特定日期:2021-01-19  注意：是UTC 时间 " title="UTC+8 取某天应为 [2021-01-01T08:00 TO 2021-01-02T08:00]" />
            </div>
            <div>
                <label for="auditing-ExecutionDuration">执行时长</label>
                <input type="text" id="auditing-ExecutionDuration" name="filter:value" placeholder="区间:[10 TO 20]/大于某值:>10/特定值:10  单位:ms" />
            </div>
            <div>
                <label for="auditing-ClientIpAddress">客户端Ip</label>
                <input type="text" id="auditing-ClientIpAddress" name="filter:ClientIpAddress" />
            </div>
            <div>
                <label for="auditing-ClientName">客户端名称</label>
                <input type="text" id="auditing-ClientName" name="filter:ClientName" />
            </div>
            <div>
                <label for="auditing-BrowserInfo">浏览器信息</label>
                <input type="text" id="auditing-BrowserInfo" name="filter:BrowserInfo" />
            </div>
            <div>
                <label for="auditing-CustomData">自定义数据</label>
                <input type="text" id="auditing-CustomData" name="filter:CustomData" />
            </div>
        </fieldset>
        <fieldset>
            <legend>查询选项</legend>
            <span class="checkbox">
                <label for="mode-count">只查数量</label>
                <input type="radio" value="count" id="mode-count" name="mode" />
            </span>
            <span class="checkbox">
                <label for="mode-summary">简要信息</label>
                <input type="radio" value="summary" id="mode-summary" name="mode" />
            </span>
            <span class="checkbox">
                <label for="mode-all">全部信息</label>
                <input type="radio" value="" id="mode-all" name="mode" checked="checked" />
            </span>
            <span class="checkbox">
                <label for="mode-frequence">高频</label>
                <input type="radio" value="stack_frequent" id="mode-frequence" name="mode" />
            </span>
            <span class="checkbox">
                <label for="mode-frequence">用户最多</label>
                <input type="radio" value="stack_users" id="mode-user" name="mode" />
            </span>
        </fieldset>
        <div style="position:absolute;right:0;top:0">
            <a href="https://exceptionless.com/docs/filtering-and-searching/#filter--search-by-specific-criteria">更多查询条件</a> *号表示模糊匹配
        </div>
    </form>


    <fieldset id="output">
        <legend>输出结果</legend>
        <div id="result"></div>
    </fieldset>
    <script type="text/javascript">
        const exceptionless = {
            baseUrl: "", authorization: ""
        }
        $.ajax({
            url: "exceptionless.json",
            method: "get"
        }).then(res => {
            $.extend(exceptionless, res)
        })
        $("input,select").change(function () {
            $("#result").html('')
            const t = $("#myForm").serializeArray();
            const data = {}
            const query = { filter: '' }
            const builderOfQuery = []
            $.each(t, (i, v) => {
                data[v.name] = v.value
                if (/filter:/.test(v.name)) {
                    if (v.value !== '') {
                        const arr = v.name.split(':')
                        builderOfQuery.push(`${arr[1]}:${v.value}`)
                    }
                }
                else {
                    query[v.name] = v.value
                }
            })
            query.filter = builderOfQuery.join(' ')
            let url = data['mode'] === 'count' ? '/api/v2/events/count' : '/api/v2/events'
            url = exceptionless.baseUrl + url
            $.ajax({
                url: url,
                data: query,
                beforeSend: function (request) {
                    request.setRequestHeader("authorization", 'Bearer ' + exceptionless.authorization);
                },
            }).then(res => {
                const text = JSON.stringify(res)
                if (text === '[]') text = '没有数据!'
                $("#result").html(text)
            })
        })
    </script>
</body>
</html>